<template>
	<view>
		<view class="citypicker">
			<u-mask :show="show" @click="close">
				<u-popup v-model="show" mode="bottom" :length="height" :closeable="false" :mask-close-able="false"
					:mask="false" @scroll="scroll">
					<view class="hd">
						<view class="tl">
							<text class="u-flex-1">请选择所在地区</text>
							<!-- <u-button type="primary" size="mini" @click="select">确定</u-button> -->
						</view>
						<view class="selectCity">
							<scroll-view scroll-x="true" v-if="areaArr.length > 0"
								style="width: 690rpx;height: 38rpx;white-space: nowrap;">
								<view class="cell" v-for="(item,index) in areaArr" :key="index">
									<template>
										<text class="areaname" :class="index == areaArr.length - 1?'last':'nor'"
											@click="chooseAreaTags(item,index)">{{item.name}}</text>
										<!-- <u-icon name="arrow-right" class="u-content-color u-p-l-15 u-p-r-15 ico" v-if="index < level - 1"></u-icon> -->
										<u-icon name="arrow-right"
											class="u-content-color u-p-l-15 u-p-r-15 ico"></u-icon>
										<!-- <text class="iconfont icon-youjiantou u-content-color u-p-l-15 u-p-r-15 ico"></text> -->
									</template>
								</view>
							</scroll-view>
							<view v-else>
								<text>请选择省份</text>
							</view>
						</view>
					</view>
					<view class="content pt">
						<u-index-list :scrollTop="scrollTop" :offset-top="0" :sticky="false" :showSidebar="false"
							:index-list="letters">
							<view v-for="(item, index) in list" :key="index">
								<u-index-anchor :index="item.letter" />
								<!-- <view class="list-cell" :class="chooseCityId == n.id?'on':''" v-for="(n,i) in item.data" :key="n.id" @click="chooseArea(n)">{{n.name}}<u-icon name="checkmark" class="u-type-primary u-p-l-5" v-if="chooseCityId == n.id"></u-icon></view> -->
								<u-cell-group>
									<u-cell-item :class="chooseCityId == n.id?'on':''" v-for="(n,i) in item.data"
										:key="n.id" @click="chooseArea(n)" :title="n.name"></u-cell-item>
								</u-cell-group>
							</view>
						</u-index-list>
					</view>
				</u-popup>
			</u-mask>
		</view>
	</view>
</template>

<script>
	import pinyin from '@/common/pinyin.js';
	export default {
		name: "citypicker",
		props: {
			show: {
				type: Boolean,
				default () {
					return false
				}
			},
			height: {
				type: [Number, String],
				default: '80%'
			},
			// choose: {
			// 	type: Array,
			// 	default () {
			// 		return ['广东省', '清远市']
			// 	}
			// },
			level: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U", "V", "W", "X", "Y", "Z"
				],
				letters: [],
				provs: [],
				list: [],
				choose: ['广东省', '清远市'], //默认选中地区
				areaArr: [
					// {
					// 	name: '全国',
					// 	id: 0
					// },
				],
				// isLastCity: false,
				chooseCityId: 0,
				// level: 4 //限制最大地区级别为街道
				setCity:{}
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		created() {
			// 默认地区
			this.areaArr = [{name: '全国',id: 0}]
			this.getDefaultAreaData()

			// 初始化地区（指定经营地区，从/Operator/Detail获取）
			this.$store.dispatch('getWebSetting').then(res => { //获取网站信息
				this.setCity = res.city
				console.log('setCity',this.setCity)
				
				// this.areaArr.push({
				// 	id: this.setCity.cityid,
				// 	name: this.setCity.cityname,
				// 	level: 1
				// })
				// this.getNextAreaData(this.setCity.cityid)
			})
		},
		methods: {
			async getDefaultAreaData() {
				// 默认已选地区
				if (this.choose.length > 0) {
					let obj = {}

					for (let i = 0; i < this.choose.length; i++) {
						let areaName = this.choose[i]
						let getNextAreaData = await this.getNextAreaData(this.areaArr[this.areaArr.length - 1].id)

						console.log('getNextAreaData', getNextAreaData.filter((item) => item.name == areaName))
						obj = {
							name: areaName,
							id: getNextAreaData.find((item) => item.name == areaName).id
						}
						if (i == this.choose.length - 1) {
							this.chooseArea(obj)
						} else {
							this.areaArr.push(obj)
						}
					}
				}
			},
			scroll(val) {
				this.scrollTop = val;
			},
			getNextAreaData(id) {
				uni.showLoading({
					title: '加载中...'
				})
				this.chooseCityId = id
				if (id == 0) {
					this.areaArr = [{
						name: '全国',
						id: 0
					}]
				}
				return new Promise((resolve, reject) => {
					this.$u.post('/city/list', {
						Key: "",
						PageIndex: 1,
						PageSize: 9999,
						pid: id
					}).then((data) => {
						uni.hideLoading()
						if (data.rows.length == 0) {
							this.isLastCity = true
						} else {
							this.isLastCity = false
						}
						// this.loadIndexList(data.rows);
						// 只显示设置的经营省市，其他过滤
						let filterArea = data.rows
						if(id < 2){
							filterArea = filterArea.filter((item)=>item.name != this.setCity.cityname)
						}
						this.loadIndexList(filterArea); 
						resolve(data.rows)
					}).catch(err => {
						uni.hideLoading()
						reject()
					})
				})
			},
			chooseArea(n) {
				if (n.id > 0) {
					// this.getNextAreaData(n.id).then(()=>{
						// if (this.isLastCity || n.level == this.level) {
							if(this.areaArr.filter((item)=>item.level == this.level).length > 0){
								this.areaArr[this.areaArr.length - 1] = {
									name: n.name,
									id: n.id,
									level: n.level
								}
							}else{
								this.areaArr.push({
									name: n.name,
									id: n.id,
									level: n.level
								})
							}
						// } else {
						// 	this.areaArr.push({
						// 		name: n.name,
						// 		id: n.id,
						// 		level: n.level
						// 	})
						// }
					// })
				}
				if (this.level != 0 && n.level == this.level) { //level表示选中几级就关闭，默认有几级选几级
					this.select()
					return
				}
				return this.getNextAreaData(n.id)


				// if(this.level!=0 && n.level == this.level){//level表示选中几级就关闭，默认有几级选几级
				// 	this.select()
				// 	return
				// }else{
				// 	return this.getNextAreaData(n.id)
				// }
			},
			chooseAreaTags(n, index) {
				console.log('chooseAreaTags',n,index)
				this.areaArr.splice((index + 1), this.areaArr.length - index - 1)
				this.getNextAreaData(n.id)
			},
			select() {
				this.$emit('select', this.areaArr)
			},
			close() {
				this.$emit('close', false)
			},
			loadIndexList(res) {
				var list = [];
				this.letters = [];
				let that = this;
				res.forEach(n => {
					n.letter = pinyin.getCamelChars(n.name.charAt(0));
				});
				this.indexList.forEach(n => {
					list.push({
						letter: n,
						data: res.filter(item => item.letter === n)
					});
				});
				this.list = list.filter(n => n.data.length > 0);
				this.list.forEach(item => {
					this.letters.push(item.letter)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.citypicker {
		.pt {
			padding-top: 163rpx;
		}

		.hd {
			padding: 20rpx 30rpx;
			position: fixed;
			top: 0;
			z-index: 3;
			border-bottom: 1px solid $u-color-light;
			background: #fff;
			width: 100%;

			.tl {
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
			}

			.selectCity {
				padding-top: 20rpx;
				margin-top: 20rpx;

				.cell {
					display: inline-block;

					&:last-child .ico {
						display: none;
					}

					.areaname {
						color: $u-color-grey;

						&.last {
							color: #000;
							font-weight: bold;
						}
					}
				}
			}
		}


		.list-cell {
			display: inline-block;
			box-sizing: border-box;
			padding: 20rpx 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 28rpx;
			line-height: 48rpx;
			background-color: #fff;

			&.on {
				color: $u-type-primary;
			}
		}

		.content {
			position: relative;
		}
	}
</style>